<template>
    <div class="container">
        <div class="header">
            <h1>确认挂号信息</h1>
        </div>
        <div class="subTitle">
            选择就诊人：
        </div>
        <div class="card">
            <el-card shadow="always" :body-style="{ padding: '20px' }">
                <div class="card-header" slot="header">
                    <span></span>
                    <el-button :icon="Plus" type="primary" size="default" @click="$router.push('/user/add?type=add')">添加就诊人</el-button>
                </div>
                <!-- 就诊人信息 -->
                <div class="visitor">
                    <Visitor :index="index" :activeIndex="activeIndex" :visitor="item" :key="item.id" class="item"
                        @click="changeIndex(index, item.id)" v-for="(item, index) in visitorData" />
                </div>
            </el-card>
        </div>
        <div class="subTitle">
            挂号信息
        </div>
        <div class="info">
            <el-descriptions class="description" :column="1">
                <el-descriptions-item label="就诊日期 ：">{{ doctorData.workDate }} {{ doctorData.param?.dayOfWeek }} {{
                    doctorData.workTime == 0 ? '上午' : '下午' }}</el-descriptions-item>
                <el-descriptions-item label="就诊医院 ：">{{ doctorData.param?.hosname }}</el-descriptions-item>
                <el-descriptions-item label="就诊科室 ：">{{ doctorData.param?.depname }}</el-descriptions-item>
                <el-descriptions-item label="医生姓名 ：">{{ doctorData.docname }}</el-descriptions-item>
                <el-descriptions-item label="医生职称 ：">{{ doctorData.title }}</el-descriptions-item>
                <el-descriptions-item label="医生专长 ：">
                    {{ doctorData.skill }}
                </el-descriptions-item>
                <el-descriptions-item label="医是服务费 :">
                    <span>{{ doctorData.amount }}元</span>
                </el-descriptions-item>
            </el-descriptions>
        </div>
        <div class="btn">
            <el-button :disabled="activeIndex == -1" type="primary" size="default" @click="register()">确认挂号</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue';
import Visitor from './components/visitor.vue';
import { onMounted, reactive, ref } from 'vue';
import { submitOrderParams, submitOrderResponseData } from '@/api/user/type';
import { submitOrderAPI } from '@/api/user';
import { ScheduleInfoData } from '@/api/hospital/type';
import { getDoctorAPI } from '@/api/hospital';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { useVisitor } from './compasobles/useVisitor';

let { visitorData, getVisitorData } = useVisitor()
let doctorData = ref<any>({})
let activeIndex = ref<number>(-1)
onMounted(() => { getVisitorData(), getDoctor() })

let $route = useRoute()
let $router = useRouter()
const getDoctor = async () => {
    let res: ScheduleInfoData = await getDoctorAPI($route.query.scheduleId as string)
    if (res.code == 200) {
        doctorData.value = res.data
        submitOrders.hoscode = doctorData.value.hoscode
    }
}
const changeIndex = (index: number, id: number) => {
    submitOrders.patientId = id
    if (activeIndex.value == index) {
        activeIndex.value = -1
    } else {
        activeIndex.value = index
    }
}

let submitOrders = reactive<submitOrderParams>({
    // 医院编号
    hoscode: '',
    //排班id
    scheduleId: $route.query.scheduleId as string,
    // 就诊人id
    patientId: 0
})
const register = async () => {
    let res: submitOrderResponseData = await submitOrderAPI(submitOrders)
    if (res.code == 200) {
        $router.push(`/user/order?orderId=${res.data}`)
        ElMessage({
            type: 'success',
            message: '挂号成功，请尽快支付'
        })
    } else {
        ElMessage({
            type: 'error',
            message: res.message
        })
    }
}
</script>

<style scoped lang="scss">
.container {
    .header {
        h1 {
            font-size: 18px;
            font-weight: 600;
            color: #7f7f7f;
        }
    }

    .subTitle {
        letter-spacing: 1px;
        color: #999;
        margin-top: 60px;
        display: flex;
        align-items: center;

        &::before {
            display: inline-block;
            content: '';
            height: 14px;
            width: 4px;
            background: #4990f1;
            margin-right: 6px;
            border-radius: 2px;
        }
    }

    .card {
        margin-top: 20px;

        .card-header {
            text-align: right;
            margin-bottom: 10px;
        }

        .visitor {
            display: flex;
            flex-wrap: wrap;
            cursor: pointer;

            .item {
                margin: 10px;
            }
        }
    }

    .info {
        margin-top: 20px;

        ::v-deep .el-descriptions__cell {
            padding-bottom: 22px !important;
        }

        ::v-deep .el-descriptions__label {
            color: #999;
        }

        .description {
            display: flex;
            justify-content: center;
            color: #999;
            padding-bottom: 30px;

            span {
                color: #4490f1;
                font-weight: bold;
            }
        }
    }

    .btn {
        display: flex;
        justify-content: center;
    }
}
</style>